<template>
  <div class="app-container">
    <PageTools>
      <template #after>
        <el-button type="primary" size="primary" plain>创建菜单</el-button>
      </template>
      <template #content>
        <div>
          <el-table
            :data="menuList"
            style="width: 100%"
            height="400"
            border
            row-key="id"
          >
            <el-table-column
              prop="permission_name"
              label="菜单名称"
              width="200"
            />
            <el-table-column
              prop="route"
              label="菜单地址"
              width="200"
            />
            <el-table-column
              prop="permission_mark"
              label="权限标识"
              width="200"
            />
            <el-table-column
              prop="icon"
              label="图标"
              width="80"
            >
              <template slot-scope="{row}">
                <svg-icon :icon-class="row.icon" />
              </template>
            </el-table-column>
            <el-table-column
              prop="component"
              label="组件路径"
              width="200"
            />
            <el-table-column
              prop="hidden"
              label="是否显示"
              width="80"
            >
              <template slot-scope="{row}">
                <el-switch
                  :value="row.hidden===1"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="创建时间"
              width="200"
            />
            <el-table-column
              fixed="right"
              prop="zip"
              label="操作"
              width="140"
            >
              <template>
                <el-button size="mini" type="primary" icon="el-icon-edit" circle />
                <el-button size="mini" type="warning" icon="el-icon-plus" circle />
                <el-button size="mini" type="danger" icon="el-icon-delete" circle />
              </template>
            </el-table-column>

          </el-table>
        </div>
      </template>
    </PageTools>
  </div>
</template>

<script>
import { getmenuLits } from '@/api/permission'
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'Menu',
  data() {
    return {
      menuList: []// 页面数据
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      // 获取页面数据
      const res = await getmenuLits()
      console.log(res)
      this.menuList = tranListToTreeData(res, 0)
      // this.menuList = res
    }
  }
}
</script>

<style>
</style>
